<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>快快打车首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/metro-bootstrap.min.css"/>
    <style type="text/css">
        .fl{float: left;width: 50%;padding-left: 10px;}
        .fr{float: right;width: 50%;padding-right: 10px;}
        .tile{border: 2px #fff solid}
        .tile.tile-wide{ width: 100%; border-radius: 8px;}
        .tile h1{font-size: 18px;margin-top: 10px;}
        .thumbnail{margin-bottom: 0px;}

        .title-height-1{height: 150px !important;}
        .title-height-2{height: 180px !important;}
        .title-height-3{height: 90px !important;}
        .title-height-4{height: 90px !important;}
        .title-height-5{height: 90px !important;}
        .title-height-6{height: 90px !important;}
        .title-height-7{height: 70px !important;}

        .tile-color-1{background-color: #009FF3}
        .tile-color-2{background-color: #DE4A60}
        .tile-color-3{background-color: #EBA62F}
        .tile-color-4{background-color: #7175E0}
        .tile-color-5{background-color: #5D98E8}
        .tile-color-6{background-color: #31C6CC}
        .tile-color-7{background-color: #de4a62}

        .title-height-2 img{width: 40%; margin-top: 20px;}
        .title-height-4 img{width: 70%; margin-top: 20px;}
        .title-height-5 img{width: 60%; margin-top: 10px;}
        .title-height-3 img{width: 80%; margin-top: 20px;}
        .title-height-6 img{width: 75%; margin-top: 15px;}
        .title-height-7 img{width: 45%; margin-top: 10px;}

        @media only screen and (max-height:480px){
            .title-height-1{height: 127px !important;}
            .title-height-2{height: 152px !important;}
            .title-height-3{height: 76px !important;}
            .title-height-4{height: 76px !important;}
            .title-height-5{height: 76px !important;}
            .title-height-6{height: 76px !important;}
            .title-height-7{height: 59px !important;}

            .title-height-2 img{width: 30%; margin-top: 20px;}
            .title-height-4 img{width: 60%; margin-top: 15px;}
            .title-height-5 img{width: 50%; margin-top: 5px;}
            .title-height-3 img{width: 70%; margin-top: 15px;}
            .title-height-6 img{width: 65%; margin-top: 10px;}
            .title-height-7 img{width: 45%; margin-top: 10px;}

        }

        @media only screen and (min-height:481px) and (max-height:533px){
            .title-height-1{height: 140px !important;}
            .title-height-2{height: 168px !important;}
            .title-height-3{height: 84px !important;}
            .title-height-4{height: 84px !important;}
            .title-height-5{height: 84px !important;}
            .title-height-6{height: 84px !important;}
            .title-height-7{height: 66px !important;}
        }

        @media only screen and (min-height:534px) and (max-height:568px){
            .title-height-1{height: 150px !important;}
            .title-height-2{height: 200px !important;}
            .title-height-3{height: 100px !important;}
            .title-height-4{height: 100px !important;}
            .title-height-5{height: 100px !important;}
            .title-height-6{height: 100px !important;}
            .title-height-7{height: 70px !important;}

            .title-height-2 img{width: 40%; margin-top: 20px;}
            .title-height-4 img{width: 70%; margin-top: 20px;}
            .title-height-5 img{width: 60%; margin-top: 10px;}
            .title-height-3 img{width: 80%; margin-top: 20px;}
            .title-height-6 img{width: 75%; margin-top: 15px;}
            .title-height-7 img{width: 45%; margin-top: 10px;}

        }

        @media only screen and (min-height:569px) and (max-height:640px){
            .title-height-1{height: 169px !important;}
            .title-height-2{height: 200px !important;}
            .title-height-3{height: 100px !important;}
            .title-height-4{height: 100px !important;}
            .title-height-5{height: 100px !important;}
            .title-height-6{height: 100px !important;}
            .title-height-7{height: 79px !important;}
        }

        @media only screen and (min-height:641px) and (max-height:667px){
            .title-height-1{height: 176px !important;}
            .title-height-2{height: 212px !important;}
            .title-height-3{height: 106px !important;}
            .title-height-4{height: 106px !important;}
            .title-height-5{height: 106px !important;}
            .title-height-6{height: 106px !important;}
            .title-height-7{height: 82px !important;}
        }

        @media only screen and (min-height:668px) and (max-height:736px){
            .title-height-1{height: 194px !important;}
            .title-height-2{height: 234px !important;}
            .title-height-3{height: 117px !important;}
            .title-height-4{height: 117px !important;}
            .title-height-5{height: 117px !important;}
            .title-height-6{height: 117px !important;}
            .title-height-7{height: 91px !important;}
        }
    </style>
</head>
<body>
<img src="../assets/i/product/taocan-1.png" style="margin-bottom: 10px;">
<!--<div class="col-sm-6 col-md-6 clearfix" style="padding: 5px 10px 0;">
    <div class="thumbnail tile tile-wide title-height-1 tile-color-1">
        <a href="./infoProduct01.html" >
            <h1>套餐1</h1>
            &lt;!&ndash;<img src="../assets/i/examples/slider2.png" alt=""/>&ndash;&gt;
        </a>
    </div>
</div>-->

<div class="fl">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail tile tile-wide title-height-2 tile-color-2">
            <a href="./infoProduct01.html" >
                <!--<h1>套餐2</h1>-->
                <img src="../assets/i/product/taocan-2.png" alt=""/>
            </a>
        </div>
    </div>

    <div class="col-sm-6 col-md-3">
        <div class="thumbnail tile tile-wide title-height-3 tile-color-3">
            <a href="#" >
                <!--<h1>套餐4</h1>-->
                <img src="../assets/i/product/taocan-5.png" alt=""/>
            </a>
        </div>
    </div>
</div>

<div class="fr">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail tile tile-wide title-height-4 tile-color-4">
            <a href="#" >
                <!--<h1>套餐3</h1>-->
                <img src="../assets/i/product/taocan-3.png" alt=""/>
            </a>
        </div>
    </div>

    <div class="col-sm-6 col-md-3">
        <div class="thumbnail tile tile-wide title-height-5 tile-color-5">
            <a href="#" >
                <!--<h1>套餐5</h1>-->
                <img src="../assets/i/product/taocan-4.png" alt=""/>
            </a>
        </div>
    </div>

    <div class="col-sm-6 col-md-3">
        <div class="thumbnail tile tile-wide title-height-6 tile-color-6">
            <a href="#" >
                <!--<h1>套餐6</h1>-->
                <img src="../assets/i/product/taocan-6.png" alt=""/>
            </a>
        </div>
    </div>
</div>

<div style="padding: 5px 10px 0;">
    <div class="thumbnail tile tile-wide title-height-7 tile-color-7">
        <a href="#" >
            <!--<h1>套餐7</h1>-->
            <img src="../assets/i/product/taocan-7.png" alt=""/>
        </a>
    </div>
</div>
</body>
</html>